<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>富文本编辑器</title>
    <script src="/js/wangEditor.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/axios.js"></script>
    <link th:href="@{/js/el/element.css}" rel="stylesheet"  type="text/css"/>
    <script th:src="@{/js/vue.min.js}" type="text/javascript"></script>
    <script th:src="@{/js/el/element.js}" type="text/javascript"></script>
</head>
<body>
<div id="app" style="margin-top: 60px;">
    <div style="display: flex;justify-content: left;width: 250px">
        <el-form label-position="right" label-width="80px">
            <el-form-item label="标题">
                <el-input placeholder="请输入标题"
                          v-model="title" clearable></el-input>
            </el-form-item>

            <el-form-item label="类型">
                <el-select v-model="value" clearable placeholder="请选择类型">
                    <el-option
                            v-for="item in options"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>

            <div style="display: flex;justify-content: left;">
                <el-form-item label="类型添加">
                    <el-input placeholder="请添加需要的类型"
                              v-model="tag.name" clearable style="width: 200px ">
                    </el-input>
                </el-form-item>

                <div>
                    <el-button type="primary" v-on:click="addTag()">添加</el-button>
                </div>
            </div>
        </el-form>
    </div>

    <div id="editor"  class="editor">
    </div>
    <hr>
    <button @click="handleAdd">提交</button>
    <hr>
    <div v-html="content">

    </div>
</div>

</body>
<script type="text/javascript">
    new Vue({
        el: '#app',
        data: {
            title: "",
            content: "",
            editor: null,
            name:"",
            options: [],
            value: '',
            tag:{}
        },
        mounted: function() {
            this.init()
            var _this = this;
            axios.get("/api/user/tag/findAll").then(function (resp) {
                console.log(resp.data)
                _this.options = resp.data;
            })
        },
        methods: {
            init: function() {
                var E = window.wangEditor;
                this.editor = new E(document.getElementById('editor'));
                this.editor.config.uploadImgShowBase64 = true
                // 图片上传格式
                // 隐藏网络图片, 把图片转成 base 64
                this.editor.config.pasteFilterStyle = false
                // 自定义颜色
                this.editor.config.colors = ['#000000', '#eeece0', '#1c487f', '#4d80bf', '#c24f4a', '#8baa4a', '#7b5ba1', '#46acc8', '#f9963b', '#ffffff']
                // 配置字体
                this.editor.config.fontNames = ['宋体', '微软雅黑', 'Arial', 'Tahoma', 'Verdana']
                //创建
                this.editor.create();
                // 富文本内容
                this.editor.txt.html();
            },

            handleAdd: function() {
                console.log(this.editor.txt.html());
                // console.log(this.editor.txt.text());
                var content = this.editor.txt.html();
                console.log(content);
                var obj = {title : this.title, content: content,name : this.name,tagid:this.value}
                console.log(obj)
                var that = this;
                axios.post("/api/user/addboke",obj).then(function (resp) {
                    that.content = resp.data.content;
                    alert("提交成功")
                }).catch(function (reason) {
                    alert("提交失败")
                });
            },
            addTag(){
                var _this = this;
                axios.post("/api/user/tag/add",_this.tag).then(function (resp) {
                    console.log(resp.data)
                    _this.$message({
                        showClose: true,
                        offset: 100,
                        message: "添加成功",
                        type: 'success'
                    })
                    //添加完显示，不用刷新
                    axios.get("/api/user/tag/findAll").then(function (resp) {
                        console.log(resp.data)
                        _this.options = resp.data;
                    })
                })
            }
        }
    })
</script>
<style>
    /*.w-e-toolbar,*/
    /*.w-e-menu,*/
    /*.w-e-text-container,*/
    /*.w-e-text {*/
    /*// 这是内容框*!*!*/
        /*z-index: 1 !important;*/
    /*}*/
</style>
</html>